import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { SearchOutlined, SettingOutlined } from '@ant-design/icons';
import { WebsiteProvider } from './context/WebsiteContext';
import SearchPage from './pages/SearchPage';
import ManagementPage from './pages/ManagementPage';

const { Header, Content } = Layout;

const AppContent = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const menuItems = [
    {
      key: '/search',
      icon: <SearchOutlined />,
      label: '影视搜索',
    },
    {
      key: '/management',
      icon: <SettingOutlined />,
      label: '网站管理',
    },
  ];

  const handleMenuClick = ({ key }) => {
    navigate(key);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        background: '#fff', 
        padding: '0 24px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        zIndex: 1000
      }}>
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'space-between' 
        }}>
          <div style={{ 
            fontSize: '20px', 
            fontWeight: 'bold',
            color: '#1890ff'
          }}>
            🎬 影视搜索工具
          </div>
          
          <Menu
            mode="horizontal"
            selectedKeys={[location.pathname]}
            items={menuItems}
            onClick={handleMenuClick}
            style={{ 
              border: 'none',
              backgroundColor: 'transparent'
            }}
          />
        </div>
      </Header>
      
      <Content style={{ background: '#f0f2f5' }}>
        <Routes>
          <Route path="/" element={<Navigate to="/search" replace />} />
          <Route path="/search" element={<SearchPage />} />
          <Route path="/management" element={<ManagementPage />} />
          <Route path="*" element={<Navigate to="/search" replace />} />
        </Routes>
      </Content>
    </Layout>
  );
};

const App = () => {
  return (
    <WebsiteProvider>
      <Router>
        <AppContent />
      </Router>
    </WebsiteProvider>
  );
};

export default App;